<template>
  <div class=" box">
    <el-row>
      <el-col :span="24" class="container">
        <el-card shadow="never">
         <el-row>
           <el-col :span="24">
             <el-button type="primary" size="medium" @click="reset()" style="cursor: pointer">重置顺序</el-button>
           </el-col>
         </el-row>
          <el-row :gutter="20" class="icons">
            <el-col :span="3" v-for="(item,index) in iconList" :key="index" :data-id="`i${index+1}`">
              <el-card shadow="hover">
                <i :class="item.name" :style="{color:randomRgbColor()}"></i>
                <p>按住拖拽</p>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { iconList } from '@/utils/icon'
import { randomRgbColor } from '@/utils/randomRgbColor'
import Sortable from 'sortablejs'

export default {
  name: 'index',
  data() {
    return {
      iconList: iconList.slice(0,40),
      saveList:iconList.slice(0,40),
      randomRgbColor: randomRgbColor,
      drop:null,
      initialOrder:null
    }
  },
  mounted() {
    this.setRowSort()
  },
  methods: {
    setRowSort() {
      this.$nextTick(() => {
        this.drop = Sortable.create(
          document.querySelector('.icons'),
          {
            animation:250,
          }
        )
         this.initialOrder = this.drop.toArray();
      })
    },
    reset(){
      this.drop.sort(this.initialOrder);
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  .icons {
    .el-col {
      cursor: move;
      margin-bottom: 20px;
      i {
        display: block;
        width: 50px;
        height: 50px;
        margin: auto;
        text-align: center;
        font-size: 40px;
        transition: all .3s ease-in-out;
      }

      p {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        user-select: none;
      }

    }
  }
}
</style>
